import React from 'react'
import { connect } from 'react-redux'
import CSSModules from 'react-css-modules'
import styles from './shopCar.less'
import { List,InputItem ,WhiteSpace,Button,Picker,Icon} from 'antd-mobile'
import {changeNav,addShopCarTotal,subShopCarTotal} from '../../actions'
import { syAjaxGet } from '../../common/ajaxservice.js'
const Item = List.Item;

@CSSModules(styles, { allowMultiple: true })

export class ShopCarList extends React.Component {
    constructor( props ){
        super( props )
        this.state = {
            dataInfo : this.props.dataInfo,
            CommodityToggle:false
        }
    }
    componentDidMount(){
        this.judgeCheckAll(this.props.selectSignal)

    }
    componentWillReceiveProps(nextprops){
        this.judgeCheckAll(nextprops.selectSignal)
    }
    judgeCheckAll(num) {
        if(num){
            if(this.state.CommodityToggle){return}
            this.props.doaddShopCarTotal({price:this.state.dataInfo.payableFee,active:1,commodityInfo:this.state.dataInfo})
            this.setState({
                CommodityToggle:true
            })
        }else{
            if(!this.state.CommodityToggle){return}
            this.props.dosubShopCarTotal({price:this.state.dataInfo.payableFee,active:1,commodityInfo:this.state.dataInfo})
            this.setState({
                CommodityToggle:false
            })
        }
    }
    chooseCommodityToggle() {
        if(!this.state.CommodityToggle){
            this.props.doaddShopCarTotal({price:this.state.dataInfo.payableFee,active:1,commodityInfo:this.state.dataInfo})
        }else{
            this.props.dosubShopCarTotal({price:this.state.dataInfo.payableFee,active:1,commodityInfo:this.state.dataInfo})
        }
        this.setState({
            CommodityToggle:!this.state.CommodityToggle
        })
    }
    render() {
        const dataInfoItem = this.state.dataInfo;
        return(
            <div styleName = "shoplist-box">
                <div styleName = "title">
                    集团：{dataInfoItem.groupName}
                </div>
                <div styleName = 'body'>
                    <div onClick = {this.chooseCommodityToggle.bind(this)} styleName = 'svgBox'>
                        <Icon  type={this.state.CommodityToggle?require( './../../components/assets/icon_gg_duigou.svg' ):require( './../../components/assets/icon_gg_duigouweixuan.svg' )} size={"sm"}></Icon>
                    </div>
                    <div styleName = 'shopbox'>
                        <img styleName = 'left-img' src={dataInfoItem.productLogo} alt=""/>
                        <div styleName = 'rightconten'>
                            <p styleName = 'sy-title'>{dataInfoItem.productName}</p>
                            <p styleName = 'conten'>{dataInfoItem.productConfig}</p>
                            <p styleName = 'price'>￥{dataInfoItem.payableFee}</p>
                            <div styleName = 'num'>{dataInfoItem.sellConfig}</div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
const mapStateToProps = ( state ) => ({
    changeShopCarTotal:state.changeShopCarTotal,
})
const mapDispatchToProps = (dispatch) => ({
    tochangeNav:navobj => dispatch( changeNav( navobj ) ),
    doaddShopCarTotal: price => dispatch(addShopCarTotal(price)),
    dosubShopCarTotal: price =>dispatch(subShopCarTotal(price)),

})
export default connect( mapStateToProps,mapDispatchToProps )( ShopCarList )